<template>
    <div class="comp" ref="map" @dblclick="reset"> <!-- 放置图表的位置 --></div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import getProvinceMapInfo from "../../public/static/map.js"
import axios from "axios"
import { inject, ref, onMounted, onBeforeUnmount } from "vue"
const echarts = inject('echarts')
const api = inject('api')


// 2.初始化页面数据
let map = ref(null)//初始化图表容器ref值
let echartsInstance = null//初始化echarts实例对象
let allData = []//初始化业务数据

// 3.获取echarts绘图实例 设置基础配置项 完成基础图表绘制
async function initEcharts() {
    // 3.1获取绘制中国的经纬度数据
    let { data } = await axios.get('http://localhost:8080/static/map/china.json')
    // 3.2注册中国的地理数据给echarts
    echarts.registerMap('china', data)
    // 3.3获取实例
    echartsInstance = echarts.init(map.value, 'dark')
    // 3.4设置基础配置项
    let initOptions = {
        title: {
            text: "▍各地区农作物覆盖面积",
            top: "3%",
            left: "3%"
        }
    }
    // 3.5完成基础图表绘制
    echartsInstance.setOption(initOptions)
    // 3.6监听用户切换省份地图操作
    echartsInstance.on('click', async (info) => {
        console.log(info)
        // 根据中文，名字获取省份地理数据
        let { name, path } = getProvinceMapInfo(info.name)
        let { data } = await axios.get('http://localhost:8080' + path)
        // 注册中国省份的地理数据给echarts
        echarts.registerMap(name, data)
        // 绘制省份地图
        echartsInstance.setOption({
            series: [
                {
                    map: name,
                    zoom: 0.9,
                    center: undefined//自动获取地图的视觉中心
                }
            ]
        })
    })

    getData()
}

// 4.获农业种植面积数据
async function getData() {
    let { data: { content } } = await api('CropCoverage')
    allData = content
    editEcharts()
}

// 5.根据业务继续完善绘图配置项 完善图表
function editEcharts() {
    // 5.1设置绘图配置项k 
    let editOptions = {
        series: [
            {
                type: "map",
                map: "china",//注册的中国数据
                data: allData,
                roam: true,//开启平移漫游
                zoom: 1.1,//缩放比例
                top: "20%",
                center: undefined//自动获取地图的视觉中心
            }
        ],
        visualMap: {
            calculable: true,//显示拖拽手柄
            text: ['High', 'Low'],//两端文本
            inRange: {
                color: ['orange', 'orangered'],
            },
            left: "3%",
            bottom: "3%"
        }
    }
    // 5.2使用配置项完善图表 合拼新旧配置项
    echartsInstance.setOption(editOptions)
    // 5.3适配地图
    Adaptation()
}

// 6.图表适配方法 坐标系内的  坐标系外的（自己处理）
function Adaptation() {
    // ------------------手动处理适配-------------------
    // 获取自定义比例尺  获取当前图表容器的宽度/100*3.5-3.7(3.6)
    let width = map.value.offsetWidth
    let scale = width / 100 * 3.6

    // 6.1设置基础配置项
    let initOptions = {
        title: {
            textStyle: {
                fontSize: scale
            },
        }
    }
    // 6.2完成基础图表绘制
    echartsInstance.setOption(initOptions)
    // -----------------坐标系内适配----------------------
    // 6.3
    echartsInstance.resize()
}

// 7.还有中国地图
function reset() {
    echartsInstance.setOption({
        series: [
            {
                map: 'china',
                zoom: 1.1,
                center: undefined//自动获取地图的视觉中心
            }
        ]
    })
}


// 组件挂载完毕执行业务逻辑
onMounted(() => {
    initEcharts()
    window.addEventListener('resize', Adaptation)//开启窗口变化监听
})

// 组件销毁移除  防止内存泄露  
onBeforeUnmount(() => {
    window.removeEventListener('resize', Adaptation)
})
defineExpose({
    Adaptation
})

</script>

<style scoped></style>